<template>
  <div id="app" :class="{ applang: lang !== 'zh_TW' }">
<!--    <div class="startUp" v-if="countdown > 0">-->
<!--      <img src="./assets/images/logo22.png" alt="">-->
<!--    </div>-->
    <router-view></router-view>
    <loading v-show="showloading"></loading>
    <van-popup v-model="showrecharge" class="modalbg" :close-on-click-overlay="false" round>
      <div class="modal-recharge">
        <div class="recharge-title">
          <img src="./assets/images/rechargeicon1.png" alt=""> {{ $t('title.doc58') }}
        </div>
        <div class="recharge-time">
          <van-count-down :time="modalinfo.countdownSecond * 1000">
            <template #default="timeData">
              <!-- <span class="block">{{ common.stuff(timeData.days) }}</span>
              <span class="colon">:</span> -->
              <span class="block">{{ common.stuff(gethour(timeData.hours, timeData.days)) }}</span>
              <span class="colon">:</span>
              <span class="block">{{ common.stuff(timeData.minutes) }}</span>
              <span class="colon">:</span>
              <span class="block">{{ common.stuff(timeData.seconds) }}</span>
            </template>
          </van-count-down>
        </div>
        <div class="recharge-tips">{{ $t('title.doc59') }}</div>
        <div class="recharge-price">
          <div class="price-info">
            <div>{{ $t('title.doc60') }}</div>
            <p>{{ common.decal2(modalinfo.balance) }} USDT</p>
          </div>
          <div class="price-info">
            <div>{{ $t('title.doc61') }}</div>
            <p>{{ common.decal2(modalinfo.balance) }}×{{
                getrate(modalinfo.taxRate)
              }}%={{ common.decal2(modalinfo.taxAmount) }} USDT</p>
          </div>
        </div>
        <div class="recharge-btn">
          <div @click="handlerclose1">
            <p>{{ $t('title.doc55') }}</p>
          </div>
          <div @click="handlerrouter">{{ $t('title.doc56') }}</div>
        </div>
      </div>
    </van-popup>
    <van-popup v-model="showfailed" class="modalbg" :close-on-click-overlay="false" round>
      <div class="modal-failed">
        <img src="./assets/images/closeicon.png" alt="" class="closeimg" @click="handlerclose"/>
        <div class="img">
          <img src="./assets/images/failedimg.png" alt=""/>
        </div>
        <div class="failed-title">{{ $t('title.doc62') }}</div>
        <div class="failed-desc" v-html="tipsinfo.description"></div>
      </div>
    </van-popup>

    <ModalPop
        v-model="showConfigPop"
        :title="$t('title.doc54')"
        :confirmText="$t('page4.doc64')"
        :cancelText="$t('page4.doc63')"
        :cancel-btn-show="true"
        :text="$t('new.doc59')"
        @confirm="onConfirm"
        @cancel="showConfigPop=false"
    >
    </ModalPop>
  </div>
</template>

<script>
import {bus} from "./utils/http";
import {mapMutations, mapActions} from "vuex";
import store from "./store";
import {Toast} from "vant";
import VueI18n from "vue-i18n";
import router from "./router";
import FloatingBubble from './components/seepup.vue'

export default {
  name: "App",
  components: {
    FloatingBubble
  },
  data() {
    return {
      showfailed: false,
      showrecharge: false,
      showrecharge1: true,
      listTop: false,
      showloading: false,
      channelList: [],
      lang: this.$store.state.lang,
      pageAnimate: 'back',
      countdown: 5, // 初始倒计时为10秒
      timer: null,
      tipsinfo: {},
      showtime: false,
      showConfigPop: false,
      modalinfo: {}
    };
  },

  created() {
    if (localStorage.getItem("language") != undefined) {
      this.$i18n.locale = localStorage.getItem("language");
    } else {
      //默认中文
      this.$i18n.locale = "en_US";
    }
    this.showloading = false;
    this.showrecharge = false;
      this.showfailed = false;
    if (this.$store.state.isLogin) {

      setTimeout(() => {
        this.$post(this.URL.home.taxinfo, {}).then(res => {
          if (res.code == 0) {

            if (!res.data.hasOpen) {
              bus.$emit('showpopup', 0);
            } else if (window.location.pathname != '/wallet/recharge') {
              bus.$emit('showpopup', res.data)
            } else {
              bus.$emit('showpopup', 0);
            }
          }
        })
      }, 5000);
    }
  },
  methods: {

    ...mapMutations(["SET_ISAPPINFO"]),
    // ...mapActions(["Get_userData"]),
    onConfirm() {
      this.showConfigPop = false;
      this.showrecharge = false;
      bus.$emit('shownotice')
    },
    gethour(h, d) {
      return parseFloat(h + d * 24)
    },
    getrate(num) {
      let num1 = parseFloat(num) * 100;
      return this.common.decal2(num1)
    },
    handlerclose() {
      localStorage.setItem('closemodal', 1)
      this.showfailed = false;
      bus.$emit('shownotice')
    },
    handlerclose1() {
      this.showrecharge = false;
      this.showConfigPop=true;
    },
    handlerrouter() {
      this.showrecharge = false;
      this.$router.push('/wallet/recharge')
    },
    getTipsInfo() {
      const params = {categoryType: 'PAYMENT_FAILED'}
      this.$post(this.URL.home.article, params).then(res => {
        if (res.code == 0) {
          this.tipsinfo = res.data;
        }
      })
    },
    ClickTop() {
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    },

    handleScroll() {
      let t = document.documentElement.scrollTop || document.body.scrollTop;
      if (t > 2000) {
        this.listTop = true;
      } else {
        this.listTop = false;
      }
    }
  },
  mounted() {
    let _this = this;
    this.timer = setInterval(() => {
      if (this.countdown > 0) {
        this.countdown--;
      } else {
      }
    }, 1000);
    // document.title = this.$t(this.$route.meta.title);
    window.addEventListener("scroll", this.handleScroll, true);
    bus.$on("showpopup", function (data) {


      if (data == 0) {
        _this.showfailed = false;
        _this.showrecharge = false;
        bus.$emit('shownotice')
        return;
      }
      _this.$store.commit("SET_TAX_INFO", data);
      _this.modalinfo = data;
      if (data.status == 0) {
        _this.showrecharge = true;
      } else if (data.status == 2) {
        if (localStorage.getItem('closemodal') == null) {
          _this.showfailed = true;
          _this.getTipsInfo();
        } else {
          _this.showrecharge = true;
        }
      } else {
        bus.$emit('shownotice')
      }


    });
  },

  beforeEach(to, from, next) {
  },

  watch: {
    $route(to, from, d) {
      if (this.$route.meta.title != '') {
        this.lang = this.$store.state.lang
        document.title = this.$t(this.$route.meta.title);
      }
      if (this.$route.meta.isUS) {
        var _this = this;
        bus.$on("showloading", function () {
          _this.showloading = false;
        });
        bus.$on("closeLoading", function () {
          _this.showloading = false;
        });
      } else {
        var _this = this;
        bus.$on("showloading", function () {
          _this.showloading = true;
        });
        bus.$on("closeLoading", function () {
          _this.showloading = false;
        });
      }
      // 路由切换翻页效果
      if (this.$store.state.historyRouter.includes(to.path)) {
        this.pageAnimate = 'back'
      } else {
        this.pageAnimate = 'forward'
      }
      //保存路由
      let historyRouter = this.$store.state.historyRouter;
      let routerMaxLen = this.$store.state.routerMaxLen;//路由最大长度
      if (!historyRouter.includes(to.path)) {
        historyRouter.push(to.path)
      }
      if (historyRouter.length > routerMaxLen) {
        historyRouter.splice(0, 1)
      }
      this.$store.dispatch('changeState', {attr: 'historyRouter', params: historyRouter})


    },
  },
};
</script>


<style lang="less">
.modalbg {
  //background-color: #121622 !important;
  overflow: hidden;
  padding: .04rem;
  background: linear-gradient(90deg, #7B02FE 0%, #0570FD 100%) !important;
  // &:before {
  //   content: "";
  //   width: 200%;
  //   aspect-ratio: 1 / 1;
  //   background-color: #121622;
  //   position: absolute;
  //   left: 50%;
  //   top: 50%;
  //   background-image: conic-gradient(transparent, #7B02FE, #121622, #121622, #0570FD, transparent 100%);
  //   z-index: 0;
  //   animation: rotate 5s linear infinite;
  // }

  @keyframes rotate {
    from {
      transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
      transform: translate(-50%, -50%) rotate(720deg);
    }
  }
}

.modal-failed {
  width: calc(100vw - 1.04rem);
  max-width: 7.5rem;
  padding: .4rem;
  position: relative;
  background: #121622;
  border-radius: .3rem;

  .closeimg {
    position: absolute;
    top: .48rem;
    right: .48rem;
    width: .32rem;
    height: .32rem;
  }

  .img {
    text-align: center;

    img {
      width: 1.24rem;
      height: 1.24rem;
    }
  }

  .failed-title {
    margin: .24rem 0 .32rem;
    font-size: .4rem;
    color: #FF0000;
    text-align: center;
  }

  .failed-desc {
    font-size: .28rem !important;
    color: rgba(255, 255, 255, .8) !important;
    line-height: .4rem !important;
    text-align: center !important;
  }
}

.modal-recharge {
  position: relative;
  width: calc(100vw - 1.04rem);
  max-width: 7.5rem;
  padding: .4rem;
  background: #121622;
  border-radius: .3rem;
  z-index: 2;

  .recharge-title {
    display: flex;
    justify-content: center;
    font-size: .32rem;
    color: #FFFFFF;
    font-weight: 600;
    line-height: .48rem;

    img {
      width: .48rem;
      height: .48rem;
      margin-right: .08rem;
    }
  }

  .recharge-time {
    margin: .24rem 0 .4rem;
    display: flex;
    justify-content: center;

    .block {
      display: inline-table;
      width: .8rem;
      height: .72rem;
      background: #1B202D;
      border-radius: .12rem;
      text-align: center;
      font-size: .48rem;
      color: #FF0000;
      line-height: .72rem;
    }

    .colon {
      padding: 0 .16rem;
      font-size: .48rem;
      font-size: #282E3C;
      font-weight: bold;
      line-height: .72rem;
    }
  }

  .recharge-tips {
    padding-bottom: .4rem;
    font-size: .28rem;
    color: #0BCA57;
    line-height: .28rem;
    border-bottom: .02rem solid #282E3C;
  }

  .recharge-price {
    padding: .08rem 0 .48rem;

    .price-info {
      margin-top: .32rem;
      display: flex;
      font-size: .28rem;
      line-height: .28rem;

      div {
        flex: 0 0 35%;
        color: #BDBDBD;
      }

      p {
        flex: 1;
        text-align: right;
        color: #fff;
        word-break: break-all;
      }
    }
  }

  .recharge-btn {
    display: flex;
    justify-content: space-between;

    div {
      flex: 1;
      height: .88rem;
      padding: .02rem;
      background: linear-gradient(90deg, #7B02FE 0%, #0570FD 100%);
      border-radius: .48rem;
      font-size: .32rem;
      color: #FFFFFF;
      text-align: center;
      line-height: .84rem;
      box-sizing: border-box;

      &:first-child {
        margin-right: .26rem;

        p {
          height: .84rem;
          background: #1A202E;
          border-radius: .4rem;
        }
      }
    }
  }
}


@keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(720deg);
  }
}

.van-toast {
  max-width: 5.8rem !important;
}

.videoList .van-rate__icon {
  font-size: 0.24rem
}

///***（过度开始）***/
//.forward-enter,
//.forward-leave {
//  transform: translateX(100%);
//}
//.back-enter,
//.back-leave {
//  transform: translateX(-100%);
//}
///***（过度进行中）***/
//.forward-enter-active,
//.forward-leave-active,
//.back-enter-active,
//.back-leave-active {
//  transition: all .5s;
//}
///***（过度结束）***/
//.forward-enter-to {
//  transform: translateX(0);
//}
//.forward-leave-to {
//  transform: translateX(-100%);
//}
//.back-enter-to {
//  transform: translateX(0);
//}
//.back-leave-to {
//  transform: translateX(100%);
//}
//
//@keyframes fold-left-in {
//  0% {
//    transform: translate3d(100%, 0, 0);
//  }
//  100% {
//    transform: translate3d(0, 0, 0);
//  }
//}
//
//@keyframes fold-left-out {
//  0% {
//    transform: translate3d(0, 0, 0);
//  }
//  100% {
//    transform: translate3d(-100%, 0, 0);
//  }
//}
///* 右进 */
//@keyframes fold-right-in {
//  0% {
//    transform: translate3d(-100%, 0, 0);
//  }
//  100% {
//    transform: translate3d(0, 0, 0);
//  }
//}
//
//@keyframes fold-right-out {
//  0% {
//    transform: translate3d(0, 0, 0);
//  }
//  100% {
//    transform: translate3d(100%, 0, 0);
//  }
//}

//.home {
//  position: absolute;overflow: auto;
//  max-width: 10rem;
//  width: 100%;
//  height: 100%;
//}

//.w856 {
//
//  min-height: 100%;
//}
#app {
  //background: #121622;
  position: relative;
  min-height: 100vh;
  height: 100%;
  word-wrap: break-word;
  word-break: normal;
  width: 100%;
  max-width: 8.5rem;

  margin: 0 auto;
  background-size: 100% 100%;
  overflow: hidden;


  .Top {
    position: fixed;
    right: .2rem;
    bottom: 1.54rem;

    img {
      height: .48rem;
      width: .48rem;
    }
  }

  .foot_h {
    height: 1.38rem;
  }

  .van-empty__image {
    height: auto;
  }

  .empty {
    text-align: center;
    padding: 1rem 0;

    img {
      width: 160px;
      max-width: 100%;
    }

    p {
      display: block;
      color: #999;
      margin-top: .4rem;
    }
  }


}


.itemBox {
  border-radius: 0.16rem;
  background: #1A202E;
  box-shadow: 0px .1rem .2rem 0px rgba(0, 0, 0, 0.06);
  margin-bottom: .24rem;
  padding: .24rem;
}


.van-popup--bottom {
  left: auto !important;
  max-width: 8.5rem;
}

.pop_type {
  .name {
    font-size: .32rem;
    text-align: center;
    color: #222222;
    line-height: .44rem;
    padding: .28rem 0;
  }

  .scroll {
    max-height: 5rem;
    overflow: scroll;
  }

  .esc {
    border-top: .1rem solid #f2f2f2;
    padding: .32rem 0;
    font-size: .32rem;
    font-weight: 500;
    color: #3E9AFF;
    text-align: center;
  }
}


.area_pop {
  color: #333;

  .title {
    font-size: .32rem;
    text-align: center;
    padding: .3rem;

    .abs {
      right: .3rem;
      top: .35rem;

      i {
        font-size: .32rem;
      }
    }
  }

  .tip {
    padding: .2rem .3rem;
    border-top: .02rem solid #eee;
    display: none;
  }

  .so {
    height: .8rem;
    background: #f5f5f5;
    margin: 0 .3rem;
    border-radius: .12rem;
    padding: 0 .1rem;

    .ico {
      background: url("assets/images/ico_so.png") no-repeat center center;
      width: .5rem;
      height: .8rem;
      background-size: .3rem auto;
    }

    .flexs {
      margin-left: .16rem;
    }

    input {
      width: 100%;
      background: none;
      border: 0;

      &::placeholder {
        color: #999;
      }
    }

    .closes {
      margin-right: .1rem;

      img {
        height: .32rem;
      }
    }
  }

  ul {
    height: 4.5rem;
    overflow: auto;
    margin: 0 .3rem;

    li {
      border-bottom: .02rem solid #E8EDF3;
      padding: .22rem 0;

      .ico {
        margin-right: .2rem;

        img {
          height: .32rem;
        }
      }
    }
  }
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.password_pop {
  background: linear-gradient(#0d2623 0%, #044126 50%, #004c2a 100%);

  .van-number-keyboard {
    position: relative;
  }

  .van-password-input__security li {
    width: 0.96rem;
    height: 0.96rem;
    background: #fff;
    border-radius: 0.16rem;
    color: #fff;
    border: 0.02rem solid #fff;
  }

  .van-password-input {
    margin: 0;
  }

  .van-password-input__cursor {
    background: #ffffff;
  }

  .van-number-keyboard {
    background: none;

    .van-key {
      width: 2.3rem;
      height: 0.96rem;
      background: #fff;
      border-radius: 0.08rem;
      color: #000;
    }
  }

  .pass {
    border-radius: 0.2rem;
    padding: 0.4rem 0.36rem;
    color: #fff;

    .van-password-input__item--focus {
      border: .02rem solid #db4057;
    }

    //光标
    .van-password-input__cursor {
      background: #0040EF;
    }

    //密码原点
    .van-password-input__security i {
      background: #000;
    }

    button {
      width: 100%;
      border: 0;
      height: 0.94rem;
      border-radius: 8px;
      color: #ffffff;
      margin-top: 10px;
      background: #06CE64;
    }

    .box {
      padding: .3rem 0;

      .abs {
        width: 100%;
        height: .9rem;
        opacity: 0;
        z-index: 2;
      }
    }
  }

  .jianpan {
    color: #fff;

    p {
      line-height: 0.76rem;
      text-align: center;
    }
  }

  .title {
    font-size: 0.3rem;
    font-weight: 500;
    line-height: 0.42rem;

    .abs {
      right: 0;
      top: 0;

      i {
        font-size: 0.3rem;
      }
    }
  }
}

.bg {
  position: fixed;
  top: 0;
  width: 100%;
  max-width: 8.5rem;
  // background: url(assets/images/bg-html.png) no-repeat top center;
  // background-size: cover;
  height: 100vh;
}

.videoList {
  margin-bottom: .16rem;

  .cname {
    align-items: center;
    color: #fff;
    margin-bottom: .24rem;

    .n {
      font-size: 0.32rem;
      font-weight: 600;
      line-height: 0.3rem;
      letter-spacing: 0.015rem;
    }

    .v {
      font-size: .24rem;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #BDBDBD;
    }

    img {
      height: 0.44rem;
    }
  }

  .list {
    display: inline-block;
    overflow: hidden;
    width: 100%;
    overflow-x: scroll;

    li {
      width: 48.4%;
      margin-bottom: .24rem;
      border-radius: 0.16rem;
      background: rgba(255, 255, 255, 0.05);
      overflow: hidden;
      position: relative;

      width: 2.2rem;
      display: inline-block;
      margin-right: 0.24rem;

      .pic {
        // height: 1.92rem;
        position: relative;

        img {
          // height: 100%;
          height: 3rem;
          border-radius: 0.24rem;
          object-fit: cover;
          width: 100%;
        }

        .abs {
          bottom: 0;
          left: 0;
          font-size: 0.2rem;
          display: flex;
          align-items: center;
          width: 100%;
          padding: .16rem;

          .v {
            flex: 1;
            display: flex;
            align-items: center;

            img {
              width: 0.2rem;
              height: 0.2rem;
              margin-right: .06rem;
              vertical-align: top;
            }
          }
        }

        .str {
          font-size: .24rem;
          position: absolute;
          top: 0;
          left: 0;
          background: linear-gradient(180deg, #FFFB8D 0%, #FF9204 100%) !important;
          color: #000;
          border-radius: .24rem 0 .24rem !important;
          padding: 0.08rem 0.16rem;

          span {
            line-height: .4rem;
            text-align: center;
            display: block;
          }
        }
      }

      button {
        border-radius: 0.8rem;
        background: linear-gradient(90deg, #1B5BFF 0%, #C029FF 100%);
        border: 0;
        font-size: 0.24rem;
        color: #fff;
        padding: 0 .3rem;
        height: 0.48rem;
      }

      .info {
        padding: .16rem;

        .title {
          font-size: 0.26rem;
          display: inline-block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      .pingfen {
        margin: .12rem 0 .24rem 0;
        font-size: .24rem;
        align-items: center;
      }

      &:last-child {
        margin-right: 0;
      }
    }
  }
}

.videoList:last-child {
  margin-bottom: 1rem;
}

.videoLists {
  margin-bottom: .16rem;

  .cname {
    align-items: center;
    color: #fff;
    margin-bottom: .24rem;

    .n {
      font-size: 0.32rem;
      font-weight: 600;
      line-height: 0.3rem;
      letter-spacing: 0.015rem;
    }

    .v {
      font-size: .24rem;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #BDBDBD;
    }

    img {
      height: 0.44rem;
    }
  }

  .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    li {
      width: 30.33%;
      margin-bottom: .24rem;
      border-radius: 0.16rem;
      background: rgba(255, 255, 255, 0.05);
      overflow: hidden;
      position: relative;

      display: inline-block;

      .pic {
        // height: 1.92rem;
        position: relative;

        img {
          // height: 100%;
          height: 3rem;
          border-radius: 0.24rem;
          object-fit: cover;
          width: 100%;
        }

        .abs {
          bottom: 0;
          left: 0;
          font-size: 0.2rem;
          display: flex;
          align-items: center;
          width: 100%;
          padding: .16rem;

          .v {
            flex: 1;
            display: flex;
            align-items: center;

            img {
              width: 0.2rem;
              height: 0.2rem;
              margin-right: .06rem;
              vertical-align: top;
            }
          }
        }

        .str {
          font-size: .24rem;
          position: absolute;
          top: 0;
          left: 0;
          background: linear-gradient(180deg, #FFFB8D 0%, #FF9204 100%) !important;
          color: #000;
          border-radius: .24rem 0 .24rem !important;
          padding: 0.08rem 0.16rem;

          span {
            line-height: .4rem;
            text-align: center;
            display: block;
          }
        }
      }

      button {
        border-radius: 0.8rem;
        background: linear-gradient(90deg, #1B5BFF 0%, #C029FF 100%);
        border: 0;
        font-size: 0.24rem;
        color: #fff;
        padding: 0 .3rem;
        height: 0.48rem;
      }

      .info {
        padding: .16rem;

        .title {
          font-size: 0.26rem;
          display: inline-block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      .pingfen {
        margin: .12rem 0 .24rem 0;
        font-size: .24rem;
        align-items: center;
      }
    }
  }

}

.Fbottom {
  padding: .28rem 0;
}

:root {
  --color: #5952F5;
  --color1: #5BCB9A;
  --color2: #8F9AAE;
  --border-bottom: .02rem solid #47464A;
  --border: .02rem solid #5952F5;
  --backgroundLinear: linear-gradient(113.99deg, #114FEE 6.12%, #B654FD 83.22%);
  --backgroundLinear1: linear-gradient(135.74deg, rgba(17, 79, 238, 0.2) 10.07%, rgba(182, 84, 253, 0.2) 99.84%);

  --COcolor1: #BDBDBD;
  --COcolor2: #18E0D6;
  --COcolor3: #ffffff;
  --COborder1: .02rem solid #7B02FE;
  --COborder2: .02rem solid #2B2B37;
  --COborder3: .02rem solid rgba(255, 255, 255, 0.1);
  --COborder4: .02rem solid rgba(255, 255, 255, 0.6);
  --CObackgroundLinear1: linear-gradient(270deg, #0571FD 0%, #7B02FE 100%, #7B02FE 100%);
  --CObackgroundLinear2: #1A202E;
  --CObackgroundLinear3: #121622;
}

.van-dialog__message {
  color: #000;
  font-size: .32rem;
}

.startUp {
  background: url("assets/images/qd.png") no-repeat center;
  background-size: 100% 100%;
  position: fixed;
  z-index: 9999;
  top: 0;
  max-width: 8.5rem;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    width: 150px;

  }
}
</style>
